/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useLayoutEffect, useEffect, useCallback, lazy, Suspense } from 'react';
import { Link } from "react-router-dom";
import {ErrorBoundary} from "react-error-boundary";
import { DatePicker } from 'antd';
import Counter from './Counter';
import Counter2 from './Counter2';
import News from './News';
import MeasureExample from './MeasureExample';
import BookablesList from './BookablesList';
import SayHello from './SayHello';
import UserInput from './UserInput';
import Avatar from './Avatar';
import { AuthProvider } from './AuthContext';
import useCityList from './useCityList';
import GithubQuery from './GithubQuery';
import Message from './Message';
import { useDataApi } from './useDataApi';
import { store } from './store/store'
import {useBattery, useLongPress} from 'react-use';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from 'react-query'
import axios from 'axios';
import './App.css';
import { fetchMessage, fetchNextMessage, makeThrower } from './utils';

// https://juejin.cn/post/6948748617817522206#heading-2
const queryClient = new QueryClient()

const LazyNews = lazy(() => import("./News"));

function ErrorFallback ({ error } : { error: Error}) {
  return <p className="error">{error}</p>;
}

const getFirstMessage = makeThrower(fetchMessage());

function TestLayout() {
  console.log("reder layout...");
    const [value, setValue] = useState(0);
    const [showNews, setShowNews] = useState(false)
    // const { cityList, loading } = useCityList("11111");
    // const { cityList: cityList2, loading: loading2 } = useCityList("22222");
    // const batteryState = useBattery();

    // useLayoutEffect(() => {
    //   if (value === 0) {
    //     console.log('2....')
    //     setValue(10 + Math.random() * 200);
    //   }
    // }, [value]);
    // const [query, setQuery] = useState('redux');
    // const [{ data, isLoading, isError }, doFetch] = useDataApi(
    //   'https://hn.algolia.com/api/v1/search?query=redux',
    //   { hits: [] },
    // );
    const test = useCallback(() => {
      // console.log('1....')
      setValue(0)
    }, [setValue])
    // console.log('3....')

    const color = !value  ? 'red' : 'yellow'

    const onLongPress = () => {
      console.log('calls callback after long pressing 300ms');
    };
  
    // const defaultOptions = {
    //   isPreventDefault: true,
    //   delay: 300,
    // };
    // const longPressEvent = useLongPress(onLongPress, defaultOptions);
    const [getMessage, setGetMessage] = useState(() => getFirstMessage);
    function next () {
      const nextPromise = fetchNextMessage();
      const getNextMessage = makeThrower(nextPromise);
      setGetMessage(() => getNextMessage);
    }
	  return (
        <QueryClientProvider client={queryClient}>
          <p><button onClick={() => setValue(v => v+1)}>Change Value</button>{value}</p>
          <AuthProvider>
            <React.Fragment>
              <Link to="/">Home</Link><br/>
              <Link to="/couter/34">couter</Link><br/>
              <Link to="/couter2">couter2</Link><br/>
              <Link to="/booklist">booklist</Link><br/>
              {/* <SayHello />
              <UserInput />
              <BookablesList /> */}
              
              
              {/* <MeasureExample /> */}
              <Counter2 />
              {/* <News /> */}
              <Counter />
              <Avatar
                src={`https://iknow-pic.cdn.bcebos.com/b64543a98226cffcdd85b189bb014a90f603ea5a`}
                fallbackSrc="https://iknow-pic.cdn.bcebos.com/a8773912b31bb05135ebbd13347adab44aede03a"
                alt="测试"
              />
              {/* {
                showNews ? <Suspense fallback={<div>Loading...News</div>}>
                  <LazyNews />
                </Suspense> : <button onClick={() => setShowNews(true)}>Load News</button>
              } */}
              {/* <ErrorBoundary FallbackComponent={ErrorFallback}>
                <Suspense
                  fallback={<p className="loading">Loading message...</p>}
                >
                  <Message
                    getMessage={getMessage}
                    next={next}
                  />
                </Suspense>
              </ErrorBoundary> */}
              
              {/* <form
                onSubmit={event => {
                  doFetch(
                    `http://hn.algolia.com/api/v1/search?query=${query}`,
                  );
        
                  event.preventDefault();
                }}
              >
                <input
                  type="text"
                  value={query}
                  onChange={event => setQuery(event.target.value)}
                />
                <button type="submit">Search</button>
              </form>
        
              {isError && <div>Something went wrong ...</div>}
        
              {isLoading ? (
                <div>Loading ...</div>
              ) : (
                <ul>
                  {data.hits.map((item: any) => (
                    <li key={item.objectID}>
                      <a href={item.url}>{item.title}</a>
                    </li>
                  ))}
                </ul>
              )}
              <DatePicker />
              {batteryState.isSupported && batteryState.fetched && 
                <div>
                  <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />
                  <strong>Battery state</strong>: <span>fetched</span> <br />
                  <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />
                  <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />
                  <strong>Charging time</strong>:&nbsp;&nbsp;
                  <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />
                  <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>
                </div>
              }
              <p style={{ background: color}} {...longPressEvent}>value: {value}</p>
              <button onClick={test}>点我</button>
              {
                loading ? <p>loading</p> : 
                cityList.map(c => <h2 key={c}>{c}</h2>)
              }
              <br />
              {
                loading2 ? <p>loading</p> : 
                cityList2.map(c => <h3 key={c}>{c}</h3>)
              } */}
            </React.Fragment>
          </AuthProvider>
          {/* <GithubQuery /> */}
        </QueryClientProvider>
    );
}

export default TestLayout;
